<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <meta name="format-detection" content="telephone=no">
    <link href="fonts/font-awesome.min.css" rel="stylesheet" />
    <link href="css/jquery.mloading.css" rel="stylesheet" />
    <!--<link href="css/mobile-select-date.css" rel="stylesheet" />-->
    <link href="css/common.css?version=1000" rel="stylesheet" />
    <link href="css/newCar.css" rel="stylesheet" />
    <title>e车险保</title>
    <style type="text/css">
        .model{
            border: 1px solid #dedede;
            position: absolute;
            top: 5rem;
            left: -4.55rem;
            right: 0;
            max-height: 17rem;
            overflow: auto;
            z-index: 100;
            background: #fff;
            line-height: 1.82rem;
            text-align: center;
            padding: 5px 2px;
        }
        .box .item .left{
            flex:1;
            -webkit-flex: 1;
        }
       /* .model .option{
            border
        }*/
    </style>
</head>
<body class="bacc">
    <div class="top-title" id="newCar">
        <div class="nav-left"><i class="fa fa-angle-left" aria-hidden="true"></i></div>
        车辆信息
    </div>
    <div class="box-box" id="carInfo" v-cloak @click="closeBox">
        <div class="box">
            <div class="title-box"><div class="title">车辆信息</div></div>
            <div class="item">
                <div class="left">车架号</div>
                <div class="right"><input type="text"  placeholder="请输入车架号" v-model="carInfo.vin" id="vin" class="upper"></div>
            </div>
            <div class="item">
                <div class="left">发动机号</div>
                <div class="right"><input type="text"  placeholder="请输入发动机号" v-model="carInfo.engineNo" id="engineNo" class="upper"></div>
            </div>
            <div class="item">
                <div class="left" style="flex:none;">品牌型号</div>
                <div class="right has-icon">
                    <input type="text"  placeholder="请输入品牌型号" v-model="carInfo.brandName"  @input="listenerChange(event.currentTarget,carInfo.brandName)" id="brandName">
                    <!--class="fa fa-angle-right" aria-hidden="true"-->
                    <i  class="fa fa-angle-right" aria-hidden="true"><img src="images/close-48px.png" style="width:12px;" class="hide" @click="deleteName(event.currentTarget)"></i>
                    <div class="model" v-show="carInfo.show" v-model="carInfo.show">
                        <div class="option"v-for="(option,item) in model" v-model="model" @click="selectOpt(item,option)" :data-code="item" >{{option}}</div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="left">注册日期</div>
                <div class="right has-icon date" id="register-date"><input type="date"  placeholder="请输入注册日期"  v-model="carInfo.registerDate" id="registerDate"><!--<i class="fa fa-angle-right" aria-hidden="true"></i>--></div>
            </div>
            <div class="item">
                <div class="left">过户</div>
                <div class="right">
                    <div class="chec-one" id="is-transfer">
                        <div class="hide">{{carInfo.isTrans}}</div>
                        <input type="checkbox" value="1" id="transfer" name="" class="hide" v-model="carInfo.isTrans" id="isTrans"/>
                        <label for="transfer" @click="change(carInfo.isTrans)"></label>
                    </div>
                </div>
            </div>
            <div class="item transfer-date" v-show="carInfo.isTrans">
                <div class="left">过户日期</div>
                <div class="right has-icon date" id="transfer-date">
                    <input type="date"  placeholder="请输入过户日期"  v-model="carInfo.transDate" id="transDate">
                    <!--<i class="fa fa-angle-right" aria-hidden="true"></i>-->
                </div>
            </div>
        </div>
        <div class="button">
            <input type="button" value="下一步" id="to-next" @click="submit">
        </div>
    </div>
    <div class="alert"></div>
</body>
</html>
<script src="js/jquery-1.11.2.js"></script>
<script src="js/jquery.mloading.js"></script>
<script src="js/vue.min.js"></script>
<!--<script src="js/dialog.js"></script>
<script src="js/mobile-select-date.js"></script>-->
<script src="js/common.js"></script>
<script>
    var vm;
    $(function(){

        var YDSF = JSON.parse(localStorage.getItem("YDSF"));
        var cityCode = YDSF.cityCode;


        vm = new Vue({
            el:"#carInfo",
            data:{
                show:false,
                model:{code:""},
                carInfo:{
                    vin:"",
                    engineNo:"",
                    brandCode:"",
                    brandName:"",
                    registerDate:"",
                    cityCode:cityCode,
                    isTrans:false,
                    transDate:"",
                    licenseNo:localStorage.getItem("YDSF_licenseNo"),
                    show:false
                }
            },
            methods:{
                closeBox:function(){
                    if(vm.carInfo.show){
                        vm.carInfo.show = false;
                    }
                },
                deleteName:function(target){
                    vm.carInfo.brandName = "";
                    vm.carInfo.brandCode = "";
                    $(target).addClass("hide");
                    $(target).parent().addClass("fa-angle-right");
                },
                listenerChange:function(target,text){
                    var text = $(target).val().trim();
                    if(text != ""){
                        $(target).parent().find("i").removeClass("fa-angle-right");
                        $(target).parent().find("img").removeClass("hide");
                        getBrandCode(text);
                    }else{
                        $(target).parent().find("img").addClass("hide");
                        $(target).parent().find("i").addClass("fa-angle-right");
                        vm.carInfo.show = false;
                    }
                },
                selectOpt:function(code,text){
                    event.stopPropagation();
                    vm.carInfo.brandCode = code;
                    vm.carInfo.brandName = text;
                    vm.carInfo.show = false;
                },
                change:function(flag){
                    var flag = !flag;
                    if(flag == false){
                        vm.carInfo.transDate = "";
                    }
                },
                submit:function(){
                    if(judgeIsNULL("#vin")){
                        popInfo("请输入车架号","#vin");
                        return;
                    }
                    if(judgeIsNULL("#engineNo")){
                        popInfo("请输入发动机号","#engineNo");
                        return;
                    }
                    if(judgeIsNULL("#brandName")){
                        popInfo("请输入品牌型号","#brandName");
                        return;
                    }
                    if(judgeIsNULL("#registerDate")){
                        popInfo("请输入注册日期","#registerDate");
                        return;
                    }
                    if(vm.carInfo.isTrans && judgeIsNULL("#transDate")){
                        popInfo("请输入过户日期","#transDate");
                        return;
                    }

                    var data = {};
                    localStorage.setItem("YDSF_isNew",true);
                    data.isTrans =  (vm.carInfo.isTrans == true ? "1" : "0");
                    data.vin = vm.carInfo.vin.toUpperCase();
                    data.engineNo = vm.carInfo.engineNo.toUpperCase();
                    data.brandCode = vm.carInfo.brandCode;
                    data.registerDate = vm.carInfo.registerDate;
                    data.cityCode = vm.carInfo.cityCode;
                    data.licenseNo = vm.carInfo.licenseNo;
                    data.brandName = vm.carInfo.brandName;
                    if(vm.carInfo.isTrans){
                        data.transDate = vm.carInfo.transDate;
                    }
                    submitCarInfo(data);
                }
            }
        });
    });

    function getBrandCode(text){
        var url = ip + "/car/query";
        if(text != ""){
            $.ajax({
                url:url,
                data:{brandName:text},
                type:"get",
                dataType:'json',
                contentType : 'application/json',
                async:false,
                success:function(data){
                    if(data.code == "0000"){
                        vm.model = data.data;
                        vm.carInfo.show = true;
                    }else{
                        vm.carInfo.show = false;
                        popInfo(data.msg);
                    }
                },
                error:function(xhr,textStatus){
                    alert(xhr.responseText);
                    console.log('错误');
                    console.log(xhr);
                    console.log(textStatus);
                }
            });
        }else{
            vm.carInfo.show = false;
        }
    }

    function submitCarInfo(data){
        $("body").mLoading(config);
        var url = ip + "/quote/simulate/vehicle";
        $.ajax({
            url:url,
            data:JSON.stringify(data),
            type:"post",
            dataType:'json',
            contentType : 'application/json',
            success:function(data){
                if(data.code == "0000"){
                    var carInfo = data.data;
                    console.log(carInfo);
                    $("body").mLoading("hide");
                    if(carInfo.insurance.code == "0000"){
                       // if(carInfo.insurance.data[0].quoteResult != null){
                            var YDSF = JSON.parse(localStorage.getItem("YDSF"));
                            YDSF.carInfo = data.data;
                            localStorage.setItem("YDSF",JSON.stringify(YDSF));
                           // localStorage.setItem("YDSF_isNew",false);
                       // }
                        window.location.href = "carInsurancePrice.html";
                    }else{
                        $("body").mLoading("hide");
                        popInfo(carInfo.insurance.msg);
                    }
                }else{
                    $("body").mLoading("hide");
                    popInfo(data.msg);
                }
            },
            error:function(xhr,textStatus){
                $("body").mLoading("hide");
                popInfo("网络异常，请稍后重试。");
                console.log('错误');
                console.log(xhr);
                console.log(textStatus);
            }
        });
    }
</script>
